<template>
    <div class="comment-item">
        <div class="row flex-row j-s-b">
            <div class="left flex-row a-c">
                <img v-lazy="citem.userInfo.user_photo" alt="">
                <span class="nickName">{{citem.userInfo.nickName}}</span>
            </div>
            <div class="right flex-column a-c j-s-c">
              <div>{{citem.create_time | formatDate("YYYY-MM-DD HH:mm:ss")}}</div>
              <star :count="citem.star"></star>
            </div>
        </div>
        <div class="comment-text">
            {{citem.comment_text}}
        </div>
    </div>
</template>

<script>
import {formatDate} from "../filters/DateFilters";
import star from "../components/star.vue";
export default {
    name:"comment-item",
    props:["citem"],
    filters:{
        formatDate
    },
    components:{
      star
    }
}
</script>

<style scoped lang="scss">
.comment-item{
    .row{
        font-size: .14rem;
        img{
            width: .4rem;
            height: .4rem;
            object-fit: cover;
            border-radius: 50%;
        }
        .nickName{
            margin-left: .1rem;
        }
        .right{
            margin-right: .1rem;
          font-size: 0.11rem;
        }
    }
    .comment-text{
        font-size: .14rem;
        margin-top: .05rem;
        text-indent: 1em;
    }
    padding: .03rem;
    border-bottom: .01rem solid #dddddd;
}
</style>